<template>
  <div class="table-title">
    <a-button type="primary" @click="create = true">新建课程</a-button>
  </div>
  <CourseTable
      ref="tableRef"
      @edit="edit"
      @del="del"
      @upAndDown="change"
  />
  <!--  新建课程弹窗-->
  <a-modal v-model:visible="create" :title="editId === 0 ? '新建课程' : '编辑课程'" @ok="ok" @cancel="closeModal" class="course-modal-box">
    <a-form :model="createFormState" ref="formRef">
      <a-form-item label="课程名称" name="name" :rules="[
          {required: true,message:'请输入课程名称'}
      ]">
        <a-input v-model:value="createFormState.name"/>
      </a-form-item>
      <a-form-item
          label="课程封面"
          name="img"
          :rules="[
            {required: true,message:'请选择课程封面'}
          ]"
          ref="courseImg"
          :autoLink="false"
      >
        <a-upload-dragger
            :style="{backgroundImage: `url(${previewImg})`}"
            accept="image/*"
            :showUploadList="false"
            :beforeUpload="fileChange"
            class="upload"
        >
          <p class="ant-upload-drag-icon">
            <CloudUploadOutlined/>
          </p>
          <p class="ant-upload-text">点击或拖拽进行上传</p>
        </a-upload-dragger>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import {computed, reactive, ref} from "vue";
import {addCourseApi, changeCourseApi, delCourseApi, editCourseApi} from "@/apis/course";
import {CloudUploadOutlined} from '@ant-design/icons-vue'
import {message} from "ant-design-vue";
import CourseTable from '@/components/CourseView/CourseTable.vue'
import {filePathTransform} from "@/utils";

const tableRef = ref();

// 表格编辑
const editId = ref(0);
const edit = (data: { name: string; Id: number; img: string }) => {
  editId.value = data.Id;
  Object.assign(createFormState, {
    name: data.name,
    img: filePathTransform(data.img)
  });
  create.value = true;
}
// 表格删除
const del = async (id: number) => {
  await delCourseApi(id)
  message.success('删除成功');
  tableRef.value.getCourse();
}
const change = async (id:number)=>{
  const {data} = await changeCourseApi(id);
  message.success(data.msg);
  tableRef.value.getCourse();
}


// 新建模态框展示
const create = ref(false);
const closeModal = () => {
  createFormState.img = undefined;
  createFormState.name = '';
  formRef.value.clearValidate();
  editId.value = 0;
  create.value = false;
}
// 表单组件
const formRef = ref();
// 提交表单
const ok = async () => {
  const res = await formRef.value.validate();
  if (editId.value) {
    await editCourseApi({
      ...res,
      id: editId.value
    })
    message.success('修改成功');
  } else {
    await addCourseApi(res);
    message.success('创建成功');
  }
  tableRef.value.getCourse();
  closeModal();
}

// 表单内容
const createFormState = reactive<{ name: string; img?: File }>({
  name: '',
  img: undefined
})
// 文件选择
const fileChange = (file: File) => {
  createFormState.img = file;
  return false;
}
// 图片预览
const previewImg = computed(() => typeof createFormState.img === 'object' ? URL.createObjectURL(createFormState.img) : createFormState.img);

</script>

<style lang="less">
.course-modal-box {
  .upload {
    height: 250px;
    background-size: 100% 100%!important;

    & > span {
      display: flex !important;
      align-items: center;
      flex-wrap: wrap;
      align-content: center;

      p {
        width: 100%;
      }
    }
  }
}
</style>
<style scoped lang="less">
</style>